<template>
	<view class="home">
		<!-- 导航 -->
		<u-navbar :title="titleData" leftIconColor="#fff" placeholder bgColor="rgba(76, 109, 149, 1)" :titleStyle="titleStyle"
			:autoBack="true" v-show="navbarIF"></u-navbar>
		<!-- 分段器 -->
		<!-- 		<view class="" style="padding: 30rpx;">
			<u-subsection bgColor="rgba(0,0,0,0.1)" inactiveColor="#fff" activeColor="#4c6d95" :list="tionlist"
				:current="current" @change="changeFn" fontSize="40rpx" :bold="false"></u-subsection>
		</view> -->

		<view class="content">
			<!-- 雨量计信息 -->
			<view class="" v-show="current == 0">
				<view class="tab_box">
					<view class="example-body">
						<!-- 自定义样式和文字 -->
						<DateSwitcher prev-text="上月" next-text="本月" :btn-style="{
						    width: '80rpx',
						    backgroundColor: '#4f90cc'
						  }" :text-style="{
						    fontSize: '30rpx',
						    color: '#000000'
						  }" @change="handleDateChange" />
					</view>
				</view>
				<!-- 表格 -->
				<view class="table_box">
					<wyb-table ref="table" :headers="headers" :contents="contents" :font-size="fontSize"
						:value-format="valueFormat" border-color="#000000" content-bg-color="#4c6d95"
						content-ft-color="#fff" height="1200rpx" :loading="loading" loader-bg-color="rgba(0,0,0,0.1)"
						loader-color="#fff" loader-size="100" />
				</view>
				<view class=""
					style="margin: 20rpx 30rpx 0 30rpx;background-color: #fff;padding: 10rpx;border-radius: 10rpx;">
					<uni-pagination prevText="上一页" nextText="下一页" :total="totalPag" :pageSize="pageSize"
						@change="changePag" />
				</view>
			</view>
			<!-- 表格 -->
			<view class="" v-if="current == 1">
				<view class="con_bom">
					<!-- 				<view class="text_y">
						雨量站信息
					</view> -->
					<u-tabs :list="list" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
						lineColor="#67fff3" @click="clickTabs">
					</u-tabs>
					<yuliangzhan ref="myYLZ" :listYLZ="obYLZ"></yuliangzhan>
					<view class="rishiqs">

						<view class="nuba">
							{{ result.endTime }} 至 {{ result.startTime }} 
						</view>
						<view class="nubb">
							{{result.total}}
						</view>
						<view class="nubc">
							mm
						</view>
					</view>
				</view>
				<!-- 今日雨量 -->
				<view class="rainfallToday">
					<view class="rainfallToday_i" v-for="(i,index) in dataList" :key="index">
						<view class="rainfallToday_a">
							{{i.time}}
						</view>
						<view class="rainfallToday_b">
							{{i.value}}
						</view>
						<view class="rainfallToday_a">
							mm
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import DateSwitcher from '@/components/DateSwitcher.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan,
			wybTable,
			DateSwitcher
		},
		data() {
			return {
				dataList: [],
				loading: false,
				totalPag: 0,
				pageSize: 50,
				fontSize: [40],
				current: 0,
				tionlist: ['历史记录', '每日雨量'],
				titleStyle: {
					color: '#ffffff',
					fontSize: '40rpx'
				},
				navbarIF: true,
				// userImage: '#4c6d95',
				userImage: '#546374',
				titleData: '雨量站信息',
				obYLZ: [],
				activeStyle: {
					color: '#67fff3'
				},
				inactiveStyle: {
					color: '#c2c2c2'
				},
				list: [{
					name: '3天',
				}, {
					name: '7天',
				}, {
					name: '15天'
				}, {
					name: '30天'
				}],
				deviceName: '',
				productKey: '',
				beginReportingTime: '',
				endReportingTime: '',
				optionData: {},
				headers: [{
					label: '时间',
					key: 'time',
					width: 250
				}, {
					label: '分钟',
					key: 'MR',

					width: 100
				}, {
					label: '小时',
					key: 'HR',
					width: 100
				}, {
					label: '雨强',
					key: 'HS',
					width: 100
				}, {
					label: '今日',
					key: 'TR',
					width: 100
				}, {
					label: '昨日',
					key: 'YR',
					width: 100
				}, {
					label: '24h',
					key: 'H24R',
					width: 100
				}],
				valueFormat: [{
						type: 'smaller',
						range: 10000,
						key: 'time', //时间
						style: {
							color: '#ffffff',
							bgColor: '#2193a8'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'MR', //分钟
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'HR', //小时
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'HS', //雨强
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'TR', //今日
						style: {
							color: '#ffffff',
							bgColor: '#eaa42b'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'YR', //昨日
						style: {
							color: '#ffffff',
							bgColor: '#d25e3a'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'H24R', //24h
						style: {
							color: '#ffffff',
							bgColor: '#866099'
						}
					},
				],
				contents: [],
				pageNum: 1,
				timeMonth: {},
				result:{}
			}
		},
		onLoad(option) {
			if (option.sty == 0) {
				this.current = 0
			} else {
				setTimeout(() => {
					this.changeFn(1)
				}, 100)

			}
			this.optionData = option
			this.titleData = option.name
			// let lon = option.lon * 1
			// let lat = option.lat * 1
			// let lonlat = lon.toFixed(2) * 1 + ',' + lat.toFixed(2) * 1
			// 默认历史
			// let now = dayjs();
			// let arr = []
			// let todayStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
			// let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
			// arr[0] = todayStart
			// arr[1] = todayEnd
			// setTimeout(() => {
			// 	this.tabularData(arr)
			// }, 300)

		},
		onShow() {
			// setTimeout(() => { districtStatistics 
			// 	this.daysFn(0)
			// }, 500)
		},
		methods: {
			// 分页
			changePag(e) {
				this.pageNum = e.current
				this.tabularData(this.timeMonth)
				this.loading = true
			},
			// 选择时间
			handleDateChange(e) {
				// this.contents = []
				this.timeMonth = e
				this.pageNum = 1
				this.tabularData(e)
			},
			// 切换
			changeFn(index) {
				this.current = index
				if (index == 1) {
					this.daysFn(0)
				}
			},
			clickTabs(item) {
				this.daysFn(item.index)
			},
			// 柱状图时间
			daysFn(index) {
				let now = dayjs();
				// 3天
				let todayStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 7天
				let threeStart = now.subtract(6, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 15天
				let fifteenStart = now.subtract(14, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 30天
				let sixtyStart = now.subtract(29, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
					this.deviceNex()
				}
				if (index == 1) {
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
					this.deviceNex()
				}
				if (index == 2) {
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
					this.deviceNex()
				}
				if (index == 3) {
					this.beginReportingTime = sixtyStart
					this.endReportingTime = sixtyEnd
					this.deviceNex()
				}
			},
			// 表格数据
			tabularData(e) {
				console.log('表格', e.start, e.end);
				uni.$u.http.get('/api/device/device/getDeviceRealTimeReportedData', {
					params: {
						"pageNum": this.pageNum,
						"pageSize": this.pageSize,
						"deviceName": this.optionData.deviceName,
						"productKey": this.optionData.productKey,
						"beginReportingTime": e.start,
						"endReportingTime": e.end,
					}
				}).then(res => {
					this.totalPag = res.total
					let arr = []
					for (let i = 0; i < res.rows.length; i++) {
						arr.push(JSON.parse(res.rows[i].logValue))
					}
					let newARR = []
					for (let i = 0; i < arr.length; i++) {
						let obj = {}
						for (let j = 0; j < arr[i].length; j++) {
							// 时间
							if (arr[i][j].identifier == 'F0' || arr[i][j].identifier ==
								'TIM') {
								obj.time = dayjs(arr[i][j].value).format('MM-DD HH:mm')
							}
							//分钟
							if (arr[i][j].identifier == '21' || arr[i][j].identifier == 'MR') {
								obj.MR = arr[i][j].value
							}
							//小时
							if (arr[i][j].identifier == '1A' || arr[i][j].identifier == 'HR') {
								obj.HR = arr[i][j].value
							}
							//雨强
							if (arr[i][j].identifier == 'HS') {
								obj.HS = arr[i][j].value
							}
							//今日
							if (arr[i][j].identifier == '20' || arr[i][j].identifier == 'TR') {
								obj.TR = arr[i][j].value
							}
							//昨日
							if (arr[i][j].identifier == 'ZR' || arr[i][j].identifier == 'YR') {
								obj.YR = arr[i][j].value
							}
							//24
							if (arr[i][j].identifier == '20' || arr[i][j].identifier == 'H24R') {
								obj.H24R = arr[i][j].value
							}
						}
						newARR.push(obj)
					}
					this.loading = false
					this.contents = newARR
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 柱状图数据
			deviceNex() {
				let str = ''
				if (this.optionData.productKey == 'ioteb64a942') {
					str = 'H24R'
				} else {
					str = '20'
				}
				console.log('str', str);
				console.log('柱状图', this.beginReportingTime, this.endReportingTime);
				uni.$u.http.get('/api/device/device/selectYuliangzhanModelReportData', {
					params: {
						"identifier": str,
						"deviceName": this.optionData.deviceName,
						"productKey": this.optionData.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
						"tabPosition": 1,
						"chartType": 1,
					}
				}).then(res => {
					console.log('柱状图', res);
					if (res.code == 200) {

						let arr = []
						arr = res.data.map((i) => {
							return {
								identifier: i.identifier,
								value: i.value,
								time: dayjs(i.time).format('YYYY-MM-DD')
							}
						})
						this.dataList = arr.reverse()
						this.obYLZ = res.data
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
							setTimeout(() => {
								this.collectionOfDays(this.dataList)
							}, 500)
						}, 500)

					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 天数集合
			collectionOfDays(data) {
				console.log('data', data);
				// 处理数据函数
				if (!data || data.length === 0) {
					return {
						startTime: '暂无数据',
						endTime: '暂无数据',
						total: '0'
					};
				}

				// 获取时间范围（最早到最晚）
				const times = data.map(item => item.time).sort();
				const startTime = times[0]; // 最早时间
				const endTime = times[times.length - 1]; // 最晚时间

				// 计算总数
				const total = data.reduce((sum, item) => sum + parseFloat(item.value), 0).toFixed(1);
				let obj = {}
				obj.startTime = startTime
				obj.endTime = endTime
				obj.total = total
				this.result = obj
			},
			// 随机数
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

		},
		onResize() {
			// 横屏竖屏
			uni.getSystemInfo({
				success: (res) => {
					if (res.windowWidth > res.windowHeight) {
						console.log('横屏');
						this.navbarIF = false
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
						}, 100)
					} else {
						console.log('竖屏');
						this.navbarIF = true
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
						}, 100)
					}
				}
			});
		},

	}
</script>
<style scoped lang="scss">
	.scroll-Y {
		max-height: 1000rpx;
	}

	.home {
		min-height: 100vh;
		background-color: #4c6d95;

		.content {
			.con_bom {
				// color: #ffffff;
				margin: 20rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rishiqs {
					padding-top: 20rpx;
					font-size: 32rpx;
					color: #ffffff;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.nubb {
						font-size: 50rpx;
						text-align: center;
						color: #67fff3;
					}
				}

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}

			}

			// 每日雨量
			.rainfallToday {
				border-radius: 10rpx;
				margin: 30rpx 20rpx 0rpx 20rpx;
				padding: 30rpx 30rpx 80rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rainfallToday_i {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

					.rainfallToday_a {
						color: #ffffff;
						font-size: 40rpx;
					}

					.rainfallToday_b {
						font-size: 50rpx;
						color: #67fff3;
					}
				}
			}

			.tab_box {
				// margin: 0 20rpx;
				background-color: #ffffff;
			}

			.table_box {
				margin-top: 10rpx;
			}
		}
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #7a7d81;
	}
</style>